<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作HTML</title>
		<style>
			div {
				width: 300px;
				height: 300px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="md1">
			<p>这是一个段落</p>
			<p class="cls">这是另一个段落</p>
		</div>
		<br />
		<div id="md2">
			<p>这是一个段落</p>
			<p class="cls">这是另一个段落</p>
			
			<input type="radio" name="gender" value="0"/>
			<input type="radio" name="gender" value="1"/>
		</div>

		<script>
			//注意: 以下方法getElemen...()方法,不是一定从document开始调用
			//1.根据id来获取指定元素(唯一),返回类型是单个对象
			//var div1 = document.getElementById("md1");
			//div1.style.backgroundColor = "#ffaa7f";
			
			//注意: 此方式一般可以简写,直接使用id的值来当做对象使用
			md1.style.backgroundColor = "#55ff00";

			//2.根据class属性来获取指定多个元素(多个),返回类型是一个数组
			var ps = document.getElementsByClassName("cls");
			//遍历
			/* for(var i = 0;i < ps.length;i++){
				ps[i].style.color="red";
			} */
			
			/* var arr = [1,2,3,4,5];
			alert(typeof(arr));
			arr.forEach(function(item,idx){
				alert(item);
			}); */
			
			//3.根据元素的标签名来获取元素(多个)
			var mps = document.getElementsByTagName("p");
			var mps = document.getElementById("md2").getElementsByTagName("p");
			for(var i = 0;i < mps.length;i++){
				mps[i].style.color="red";
			}
			
			//4.根据元素name属性来获取,获取到所有name属性为指定值的元素(多个)
			var nas = document.getElementsByName("gender");
			
		</script>
	</body>
</html>
